<template>
	<div class="item-content">
		<!-- <div class="w-full h-auto">
			<div
				class="pb-[100%] relative"
				:class="data?.gameName ? 'app-hover-offset' : 'cursor-not-allowed'"
				@click="handleClick">
				<div
					class="w-full h-full absolute left-0 top-0 right-0 rounded-lg overflow-hidden flex items-center">

				</div>

			</div>
		</div> -->
		<router-link :to="handleRouterLink(data.game)" class="item-img__wrapper">
			<base-image class="item-img" :src="imgSrc" default="placeholder.svg" :type="imgServer" />
		</router-link>
		<div class="flex pt-1 text-[10px] items-center cursor-pointer flex-col" @click="handleProfile">
			<div class="flex items-center w-full justify-center">
				<account-vip :level="data.vip || 0"></account-vip>
				<div class="leading-[14px] overflow-hidden text-ellipsis whitespace-nowrap text-t-1">
					{{ data.user?.username || $t('app.hidden') }}
				</div>
			</div>
			<!-- <div class="flex-1 min-w-0 ml-1">	</div> -->
			<div
				class="w-full leading-[14px] overflow-hidden text-ellipsis whitespace-nowrap text-success text-center">
				<up-amount-slot :value="data.usdPayoutAmount || 0" />
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { BaseImage } from '@/components/base'
import UpAmountSlot from '@/components/up/up-amount-slot/index.vue'
import AccountVip from '@/components/account/account-vip/index.vue'
import { useProfileStore, useAppStore } from '@/store'
import { UpSwitchTabsEnum } from '@/components/up'
import { genOriginalRoute } from '@/components/slots/utils.ts'

const appStore = useAppStore()
const props = defineProps({
	data: {
		type: Object as any,
		default: () => {}
	},
	type: {
		type: String,
		default: 'slots'
	}
})
const profileStore = useProfileStore()

const imgSrc = computed(() => {
	if (props.data.game.gameIcon) {
		return props.data.game.gameIcon
	}
	if (props.data.gameIcon.icon) {
		return props.data.gameIcon.icon
	}
	return 'placeholder.svg'
})

const imgServer = computed(() => {
	if (imgSrc.value.indexOf('http') === 0) {
		return 'network'
	}
	if (imgSrc.value !== 'placeholder.svg') {
		return 'server'
	}
	return 'local'
})

const handleProfile = () => {
	profileStore.showProfile({
		show: true,
		userId: props.data.userId,
		tab: props.type === 'slots' ? UpSwitchTabsEnum.slots : UpSwitchTabsEnum.casino
	})
}

const handleRouterLink = (item: any) => {
	if (item.category === 3) {
		//original
		return genOriginalRoute(item)
	} else {
		return { name: 'casinoDetail', params: { id: item.slug || item.id, locale: appStore.lang } }
	}
}
</script>
<style>
.item-img {
	border-radius: 8px;
}
.item-content {
	width: 72px;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-right: 12px;
}
@media (max-width: 768px) {
	.item-content {
		width: 49px;
		margin-right: 9.5px;
	}
}
</style>
